<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="eleview/js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <table>
        <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>地址</td>
    </tr>

        <tr v-for="(user,index) in userList" :key="index">
            <td>{{user.id}}</td>
            <td>{{user.username}}</td>
            <td>{{user.address}}</td>
        </tr>
    </table>


</div>


</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                //存储查询到的数组
                userList:[]
            }
        },
        mounted(){
            //发送ajax请求查询全部数据
            axios.get("http://localhost:8080/web09/getAll").then((resp)=>{
               // console.log(resp.data)
                //此时axios中必须使用箭头函数 this才是vm
                console.log(this)
                this.userList = resp.data;

            });

        }
    });
</script>